<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../packages//reactivity/dist/global.dev.js"></script>
  </head>
  <body>
    <script>
      const {
        ref,
        reactive,
        shallowReactive,
        readonly,
        shallowReadonly,
        watchEffect,
        toRef,
        computed
      } = VueReactivity
      var obj = { a: 1 }
      var rec = reactive(obj)
      // const tr = toRef(obj, 'a')
      // const r = ref(obj)
      var c = computed(() => {
        console.log('缓存computed')
        return rec.a
      })
      console.log(c.value)
      // const r = ref({ a: 1, b: { c: 1 } })
      // const a = reactive({ a: 1, b: { c: 1 } })
      // const b = shallowReactive({ a: 1, b: { c: 1 } })
      // const c = readonly({ a: 1, b: { c: 1 } })
      // const d = shallowReadonly({ a: 1, b: { c: 1 } })
      // const e = readonly(a)
      // const f = reactive(new String('aaaaaaa'))
      // const arr = reactive([1, 2, 3])
      // watchEffect(() => {
      //   console.log('4:', arr[4])
      // })
      // watchEffect(() => {
      //   console.log('all', arr[1], arr[2], arr[3], arr[4])
      // })
      // watchEffect(() => {
      //   console.log('1:', arr[1])
      // })
      // watchEffect(() => {
      //   console.log('2:', arr[2])
      // })
      // watchEffect(() => {
      //   console.log('3:', arr[3])
      // })
      // setTimeout(() => {
      //   arr.length = 2
      // }, 3000)
      // setTimeout(() => {
      //   arr[4] = 99
      // }, 4000)
      // setTimeout(() => {
      //   arr[4] = 2
      // }, 4000)
    </script>
  </body>
</html>
